<script setup>
import { Swipe, SwipeItem } from "vant";
import { onMounted, ref } from "vue";
const props = defineProps({
  config: {
    type: Object,
    default: {},
  },
});

function useWindow() {
  const swipeItems = ref([]);
  const imageItemsTop = ref({});
  const imageItemsBottom = ref({});

  const list = Object.values(props.config.data);

  swipeItems.value = list.slice(0, 2);
  imageItemsTop.value = list[2];
  imageItemsBottom.value = list[3];

  return {
    swipeItems,
    imageItemsTop,
    imageItemsBottom,
  };
}

const { swipeItems, imageItemsTop, imageItemsBottom } = useWindow();

onMounted(() => {});
</script>
<template>
  <view class="p-middle-2">
    <view
      class="rounded-xl overflow-hidden flex flex-row justify-between items-center w-full bg-white aspect-video"
    >
      <van-swipe
        class="my-swipe w-1/2 h-full"
        :autoplay="3000"
        indicator-color="white"
      >
        <van-swipe-item
          class="bg-amber-300 h-full text-white text-center text-lg flex flex-row justify-center items-center"
          v-for="(item, index) in swipeItems"
          :key="index"
        >
          <img :src="item.imgUrl" class="h-full w-full object-fill" />
        </van-swipe-item>
      </van-swipe>

      <view class="w-1/2 h-full pl-middle flex flex-col justify-between items-center" style="box-sizing: border-box">
        <img class="w-full h-1/2" fit="contain" :src="imageItemsTop.imgUrl" />
        <img class="w-full h-1/2 mt-middle" fit="contain" :src="imageItemsTop.imgUrl" />
      </view>
    </view>
  </view>
</template>
